import React from 'react';
import {Card, Button, Table, Form, Input, Checkbox, Select, Radio, Icon, message, Modal, DatePicker} from 'antd'
import axios from '../../components/Engineering/axios';
import Utils from '../../components/Engineering/utils';
import ApiTubro from '../../components/Engineering/ApiTubro';
import SearchControl from '../../components/Engineering/SearchControl';
import QuickTool from '../../components/Engineering/QuickTool';
import ETable from '../../components/Engineering/ETable';

import Moment from 'moment'

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;


export default class User extends React.Component {

  state = {list: []}
  page = {}


  getListForPage = params => ApiTubro.getListForPage.bind(this)({
    url: '/employee/list', lqf: 45545, params: {fkndskflkdkl: 514545445}
  });

  componentDidMount() {
    this.getListForPage();
  }


  // 操作员工
  handleOperator = (type) => {
    let userInfo = this.state.selectedRows;
    if (type == 'create') {
      this.setState({
        title: '创建员工',
        isVisible: true,
        type
      })
    } else if (type == "edit" || type == 'detail') {
      if (!userInfo) return Modal.info({title: '信息', content: '请选择一个用户'})
      this.setState({
        title: {"edit": "编辑用户", "detail": "查看详情"}[type],
        isVisible: true,
        userInfo,
        type
      })
    } else if (type == "delete") {
      if (!userInfo) {
        Modal.info({
          title: '信息',
          content: '请选择一个用户'
        })
        return;
      }
      Modal.warn({
        title: '确定要删除此用户吗？',
        content: "删除后数据不可找回，是否继续操作",
        onOk: () => {
          axios.ajax({
            url: '/user/delete',
          }).then((res) => {
            if (res.code == 0) {
              this.setState({
                isVisible: false,
                selectedRowKeys: "",
                selectedRows: "",
                selectedIds: "",
              })
              this.getListForPage();
            }
          })
        }
      })
    }
  }

  handleSubmit = () => {
    let type = this.state.type;
    let data = this.userForm.props.form.getFieldsValue();
    axios.ajax({
      url: type == 'create' ? '/user/add' : '/user/edit',
      params: data
    }).then((res) => {
      if (res.code == 0) {
        this.setState({
          isVisible: false
        })
        this.getListForPage();
      }
    })
  }

  render() {
    const columns = [{
      title: 'id',
      dataIndex: 'id'
    }, {
      title: '用户名',
      dataIndex: 'username'
    }, {
      title: '性别',
      dataIndex: 'sex',
      render: sex => sex == 1 ? '男' : '女'
    }, {
      title: '状态',
      dataIndex: 'state',
      render(state) {
        return {
          '1': '咸鱼一条',
          '2': '风华浪子',
          '3': '北大才子一枚',
          '4': '百度FE',
          '5': '创业者'
        }[state]
      }
    }, {
      title: '爱好',
      dataIndex: 'interest',
      render(interest) {
        return {
          '1': '游泳',
          '2': '打篮球',
          '3': '踢足球',
          '4': '跑步',
          '5': '爬山',
          '6': '骑行',
          '7': '桌球',
          '8': '麦霸'
        }[interest]
      }
    }, {
      title: '爱好',
      dataIndex: 'isMarried',
      render: isMarried => isMarried ? '已婚' : '未婚'
    },
      {
        title: '生日',
        dataIndex: 'birthday'
      }, {
        title: '联系地址',
        dataIndex: 'address'
      }, {
        title: '早起时间',
        dataIndex: 'time'
      }
    ];
    return (
      <div>
        <Card style={{marginTop: 10}}>
          <Form layout="inline">
            <FormItem>
              <Input placeholder="请输入用户名"/>
            </FormItem>
            <FormItem>
              <Input type="password" placeholder="请输入密码"/>
            </FormItem>
            <FormItem>
              <Button type="primary">登 录</Button>
            </FormItem>
          </Form>
        </Card>
        <Card style={{marginTop: 10}}>
          <Button type="primary" icon="plus" onClick={() => this.handleOperator('create')}>创建员工</Button>
          <Button icon="edit" onClick={() => this.handleOperator('edit')}>编辑员工</Button>
          <Button onClick={() => this.handleOperator('detail')}>员工详情</Button>
          <Button type="danger" icon="delete" onClick={() => this.handleOperator('delete')}>删除员工</Button>
        </Card>


        <div className="content-wrap">
          <ETable
            rowSelection="radio"
            columns={columns}
            updateSelectedItem={Utils.updateSelectedItem.bind(this)}
            selectedRowKeys={this.state.selectedRowKeys}
            dataSource={this.state.pageListData}
            pagination={this.state.pagination}
          />
        </div>


        <Modal
          title={this.state.title}
          visible={this.state.isVisible}
          onOk={this.handleSubmit}
          width={800}
          onCancel={() => {
            this.userForm.props.form.resetFields();
            this.setState({
              isVisible: false,
              userInfo: ''
            })
          }}
        >
          <UserForm userInfo={this.state.userInfo} type={this.state.type}
                    wrappedComponentRef={(inst) => this.userForm = inst}/>
        </Modal>
      </div>
    );
  }
}

class UserForm extends React.Component {

  getState = (state) => {
    return {
      '1': '咸鱼一条',
      '2': '风华浪子',
      '3': '北大才子一枚',
      '4': '百度FE',
      '5': '创业者'
    }[state]
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 16}
    };
    const userInfo = this.props.userInfo || {};
    const type = this.props.type;
    return (
      <Form layout="horizontal">
        <FormItem label="姓名" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? userInfo.username :
              getFieldDecorator('user_name', {
                initialValue: userInfo.username
              })(
                <Input type="text" placeholder="请输入姓名"/>
              )
          }
        </FormItem>
        <FormItem label="性别" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? userInfo.sex == 1 ? '男' : '女' :
              getFieldDecorator('sex', {
                initialValue: userInfo.sex
              })(
                <RadioGroup>
                  <Radio value={1}>男</Radio>
                  <Radio value={2}>女</Radio>
                </RadioGroup>
              )}
        </FormItem>
        <FormItem label="状态" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? this.getState(userInfo.state) :
              getFieldDecorator('state', {
                initialValue: userInfo.state
              })(
                <Select>
                  <Option value={1}>咸鱼一条</Option>
                  <Option value={2}>风华浪子</Option>
                  <Option value={3}>北大才子一枚</Option>
                  <Option value={4}>百度FE</Option>
                  <Option value={5}>创业者</Option>
                </Select>
              )}
        </FormItem>
        <FormItem label="生日" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? userInfo.birthday :
              getFieldDecorator('birthday', {
                initialValue: Moment(userInfo.birthday)
              })(
                <DatePicker/>
              )}
        </FormItem>
        <FormItem label="联系地址" {...formItemLayout}>
          {
            userInfo && type == 'detail' ? userInfo.address :
              getFieldDecorator('address', {
                initialValue: userInfo.address
              })(
                <Input.TextArea rows={3} placeholder="请输入联系地址"/>
              )}
        </FormItem>
      </Form>
    );
  }
}

UserForm = Form.create({name: 'UserForm'})(UserForm);
